<!--

type
prop
label
width
fixWidth 固定宽
slot
align
fixed
sortable
children
prophtml

-->
<template>
  <div class="data-board-table">
    <el-table :data="dataList" :default-sort="sortObj" @sort-change='sortTableFun' :header-cell-style="headerStyle" :max-height="heightStr"
              v-loading="loading">
      <template v-for="({ type, prop, label, width, slot, align, fixed, sortable, fixWidth, children, prophtml }, index) in config">
        <el-table-column
            :key="index"
            :label="label"
            :type="type"
            :width="width"
            :align="align"
            v-if="type"
        ></el-table-column>
        <el-table-column
            :key="index"
            :prop="prop"
            :label="label"
            :min-width="width"
            :width="fixWidth"
            :fixed="fixed"
            :align="align"
            :sortable="sortable"
            v-else-if="slot"
        >
          <template slot-scope="scope">
            <el-image v-if="slot === 'image'" :src=imageArr[scope.$index] :preview-src-list=imageArr></el-image>
            <el-input v-if="slot === 'index'" v-model="scope.$index" placeholder="请输入内容"></el-input>
            <el-input v-if="slot === 'input'" v-model="scope.row.goodsNo" placeholder="请输入内容"></el-input>
            <p v-if="slot === 'money'">{{ scope.row.moneyFormat }}</p>
            <el-link v-if="slot === 'button'" type="primary" @click="onShowDetail(scope.row)">查看</el-link>
            <p v-if="slot === 'html'" v-html="scope.row.goodsNo + '<br>' + scope.row.categoryName"></p>
            <!--            <p v-if="slot === 'button'">测试一下</p>-->
            <!-- 以下为首页 分月KPI 显示 -->
            <p v-if="slot === 'payPlaceOrderNum'">{{ scope.row.payPlaceOrderNum }}</p>
            <p v-if="slot === 'approveOrderNum'">{{ scope.row.approveOrderNum }}</p>
            <p v-if="slot === 'oldPlaceOrderNum'">{{ scope.row.oldPlaceOrderNum }}</p>
            <p v-if="slot === 'newPlaceOrderNum'">{{ scope.row.newPlaceOrderNum }}</p>
            <p v-if="slot === 'newPlaceOrderNumRate'">{{ scope.row.newPlaceOrderNumRate }}%</p>
            <p v-if="slot === 'oldPlaceOrderNumRate'">{{ scope.row.oldPlaceOrderNumRate }}%</p>
            <p v-if="slot === 'placeOrderTotalMoney'">{{ scope.row.placeOrderTotalMoney }}</p>
            <p v-if="slot === 'oldPlaceOrderTotalMoney'">{{ scope.row.oldPlaceOrderTotalMoney }}</p>
            <p v-if="slot === 'newPlaceOrderTotalMoney'">{{ scope.row.newPlaceOrderTotalMoney }}</p>
            <p v-if="slot === 'oldPlaceOrderTotalMoneyRate'">{{ scope.row.oldPlaceOrderTotalMoneyRate }}%</p>
            <p v-if="slot === 'newPlaceOrderTotalMoneyRate'">{{ scope.row.newPlaceOrderTotalMoneyRate }}%</p>
          </template>
        </el-table-column>
        <el-table-column
            :key="prop"
            :prop="prop"
            :label="label"
            :min-width="width"
            :width="fixWidth"
            :align="align"
            :sortable="sortable"
            v-else-if="children"
        >
          <el-table-column
              v-for="(itemchildren, indexchildren) in children"
              :key="indexchildren"
              :prop="itemchildren.prop"
              :min-width="itemchildren.width"
              :width="itemchildren.fixWidth"
              :label="itemchildren.label"
              show-overflow-tooltip
              :align="itemchildren.align"
              :sortable="itemchildren.sortable"
          ></el-table-column>
        </el-table-column>
        <el-table-column
            :key="prop"
            :prop="prop"
            :label="label"
            :min-width="width"
            :width="fixWidth"
            :align="align"
            :sortable="sortable"
            v-else
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
/**
 *       staffTableConfigs: { // 员工排行榜
 *         sortObj: { prop: 'marketPrice', order: 'descending' }, // 排序
 *         list: [
 *           { type: 'index', label: '排名', width: 60 },
 *           { prop: 'brandName', label: '姓名' },
 *           { prop: 'marketPrice', label: '销售额' },
 *           { prop: 'marketPrice', label: '售后订单数', sortable: true },
 *           { prop: 'stock', label: '订单总数' }
 *         ]
 *       },
 */
export default {
  name: 'dataBoardTable',
  props: {
    sortObj: { // 排序
      type: Object,
      default: () => {
      }
    },
    config: {
      type: Array,
      default: () => []
    },
    dataList: { // 数据列表
      type: Array,
      default: () => []
    },
    heightStr: { // 数据列表 高度
      type: String,
      default: () => '888'
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      // levelList: null,
    }
  },
  watch: {
    $route () {
      // this.testFun();
    }
  },
  mounted () {
    this.$nextTick(_ => {})
  },
  created () {
    // this.testFun()
  },
  methods: {
    // 近一年员工业绩 查看 按钮
    onShowDetail (row) {
      this.$emit('tableShowDetail', row)
      // console.log('onShowDetail - 查看', row)
    },
    // 表格表头合并
    headerStyle ({ row, rowIndex }) {},
    sortTableFun (column) {
      console.log('sortTableFun 排序', column)
    }
  }
}
</script>
<style lang="scss">
.data-board-table {
  width: 100%;
  color: #333333;

  .el-table {
    //固定栏
    thead {
      color: #333333;
      th.el-table__cell{
        background-color: #F4F7FC;
        //&:last-child{
        //  background-color: #F4F7FC;
        //}
        .cell{
          padding: 0 5px;
		  font-size: 14px;
        }
      }
    }

    .el-table__header-wrapper {
      .has-gutter {
        color: #333333;

        .el-table__cell {
          //background-color: #F4F7FC;

          .cell {
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }

    .el-table__body-wrapper, .el-table__body {
      .el-table__row {
        .el-table__cell {
          .cell {
            color: #333333;
            font-size: 14px;
          }

          &:first-child {
            .cell {
              //color: #4168E7;
            }
          }
        }

        /deep/ .is-center {
          //background-color: #2D7EDF;
        }

        &:nth-child(even) {
          background-color: #F4F7FC;
        }
      }
    }
  }
}

//固定栏
//.el-table--enable-row-transition .el-table__body .el-table__row {
//  &:nth-child(even){
//    td.el-table__cell{
//      background-color: #F4F7FC;
//    }
//  }
//}
</style>
